<template>
  <div class="cluster recovery">
    <a-card style="width: 100%">
      <p slot="title" class="cardTitles">
        <span>选择考生</span>
        <a-button type="primary" style="float: right" @click="backClick"
          >返回</a-button
        >
        <a-button type="primary" style="float: right" @click="confirmBtn">确定</a-button>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-row>
            <a-col :span="4">
              <a-form-item label="用户名称">
                <a-input v-model="account" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="真实姓名">
                <a-input v-model="name" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="性别">
                <a-select v-model="sex" style="width: 100px">
                  <a-select-option value="男">男</a-select-option>
                  <a-select-option value="女">女</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="站段">
                <!-- <a-input v-model="section" type="text" style="width: 100px" /> -->
                <a-select
                  v-model="section"
                  style="width: 120px"
                  @change="handleSectionChange"
                >
                  <a-select-option
                    v-for="section in sectionData"
                    :key="section"
                  >
                    {{ section }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车间/科室">
                <!-- <a-input v-model="shop" type="text" style="width: 100px" /> -->
                <a-select
                  v-model="shop"
                  style="width: 150px"
                  @change="handleShopChange"
                >
                  <a-select-option v-for="shop in shopData" :key="shop">
                    {{ shop }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 10px">
            <a-col :span="4">
              <a-form-item label="班组名称">
                <!-- <a-input v-model="group" type="text" style="width: 100px" /> -->
                <a-select v-model="group" style="width: 100px">
                  <a-select-option v-for="group in groupData" :key="group">
                    {{ group }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="岗位类型">
                <a-input v-model="postType" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="岗位">
                <a-input v-model="post" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="职务">
                <a-input
                  v-model="occupation"
                  type="text"
                  style="width: 120px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="工号">
                <a-input v-model="jobCardID" type="text" style="width: 100px" />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item>
                <a-button type="primary" @click="search">搜索</a-button>
              </a-form-item>
              <a-form-item>
                <a-button @click="reset">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="select-content">
          <a-button type="primary" @click="tableSelectAllChange">一键全选</a-button>
        </div>
      <div style="margin-top: 20px" class="table-content">
        <a-table
          bordered
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          :columns="columns"
          :data-source="list"
          rowKey="id"
          :loading="loading"
          :pagination="pagination"
          @change="employeeChangePage"
        >
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getEmployeeList, deleteEmployee, getTree ,addEmployee } from "@/api/employee";
import { paging } from "assets/js/mixin";
import { mapMutations } from "vuex";
import {unique,objectRepeat,includes } from "@/assets/js/utils";
export default {
  mixins: [paging],
  props: {
    addEmployeeVisible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      searchAllData:[],//搜索的所以的不分页的数据
      //三级联动
      sectionData: [],
      shopData: [],
      groupData: [],
      loading: false,
      //是否显示弹框
      managementVisible: false,
      managementId: null,
      managementType: 0, //0新增1是编辑
      //搜索字段
      account: "",
      section: "",
      shop: "",
      group: "",
      sex: "",
      jobCardID: "",
      occupation: "",
      postType: "",
      post: "",
      name: "",
      selectedRowKeys: [],
      selectedRows:[],
      selectedData:[],//多选的数据
      deleteData:[],
      columns: [
        {
          title: "工号",
          dataIndex: "workerID",
          scopedSlots: { customRender: "moduleName1" },
        },
        {
          title: "用户名",
          dataIndex: "account",
          scopedSlots: { customRender: "objectName" },
        },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "性别",
          dataIndex: "sex",
        },
        {
          title: "工作证号",
          dataIndex: "jobCardID",
        },
        {
          title: "站段",
          dataIndex: "section",
        },
        {
          title: "班组",
          dataIndex: "group",
        },
        {
          title: "车间",
          dataIndex: "shop",
        },
        {
          title: "职位",
          dataIndex: "occupation",
        },
        {
          title: "岗位",
          dataIndex: "post",
        },
        {
          title: "岗位类型",
          dataIndex: "postType",
        },
      ],
      list: [],
      treeArr:{},
      formLayout: {
        spanCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      inputValue: "",
    };
  },
  mounted() {
    this.getTree();
    this.getEmployeeList();
  },
  watch: {
    addEmployeeVisible(n) {
      if (n) {
       this.deleteData = this.$store.state.selectEmployee
       var selectArr = []
       var selectRow = []
       this.deleteData.forEach((item,index)=>{
         selectArr.push(item.id)
         //selectRow.push(item)
       })
       this.selectedRowKeys = selectArr
      //this.selectedData.push(selectRow)
      //  this.selectedData = objectRepeat(this.selectedData)
      } else {
      }
    },
  },
  methods: {
    //一键选择所有的数据
    tableSelectAllChange(){
      this.getEmployeeALLList() 
    },
    getEmployeeALLList() {
      var params = {
        page: 1,
        limit: 1000000,
        account: this.account,
        section: this.section,
        shop: this.shop,
        group: this.group,
        sex: this.sex,
        jobCardID: this.jobCardID,
        occupation: this.occupation,
        post: this.post,
        postType: this.postType,
        name: this.name,
      };
      getEmployeeList(params)
        .then((res) => {
          var idArr = []
          res.data.employees.forEach((item,index)=>{
            idArr.push(item.id)
            this.selectedRowKeys.push(item.id)
            this.selectedData.push(item)
          })
          this.searchAllData = idArr
          this.selectedData = objectRepeat(this.selectedData)
          this.selectedRowKeys = unique(this.selectedRowKeys)
          // this.saveSelectEmployee(JSON.parse(JSON.stringify(this.selectedData)))
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    backClick() {
      this.$emit("back")
    },
    ...mapMutations({
      saveSelectEmployee: "SET_EMPLOYEE",
    }),
    handleSectionChange() {
      this.shop = "";
      this.group = "";
      var shopArr = [];
      var groupArr = [];
      for (const key in this.treeArr[this.section]) {
        shopArr.push(key);
      }
      for (const key2 in this.treeArr[this.section][shopArr[0]]) {
        groupArr.push(key2);
      }
      this.shopData = shopArr;
      this.groupData = groupArr;
    },
    handleShopChange() {
      this.group = "";
      var groupArr = [];
      for (const key2 in this.treeArr[this.section][this.shop]) {
        groupArr.push(key2);
      }
      this.groupData = groupArr;
    },
    //获取树结构
    getTree() {
      getTree()
        .then((res) => {
          this.treeArr = res.data.data
          var sectionArr = [];
          var shopArr = [];
          var groupArr = [];
          for (const key in this.treeArr) {
            sectionArr.push(key);
          }
          for (const key in this.treeArr[sectionArr[0]]) {
            shopArr.push(key);
          }
          for (const key2 in this.treeArr[sectionArr[0]][shopArr[0]]) {
            groupArr.push(key2);
          }
          this.sectionData = sectionArr;
          //this.shopData = shopArr;
          //this.groupData = groupArr;
          // this.section = sectionArr[0];
          // this.shop = shopArr[0];
          // this.group = groupArr[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getEmployeeList();
    },
    //重置
    reset() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.account = "";
      this.section = "";
      this.shop = "";
      this.group = "";
      this.sex = "";
      this.jobCardID = "";
      this.occupation = "";
      this.post = "";
      this.postType = "";
      this.name = "";
      this.getEmployeeList();
    },
    //确定提交选择的考生
    confirmBtn(){
      // console.log("提交的最终数据",this.selectedData)
      console.log("提交的最终数据",this.selectedRowKeys)
      console.log("初始化存储的数据",this.deleteData)
      this.selectedData = this.dealData()
      console.log("提交的最终数据",this.selectedData)
      this.saveSelectEmployee(JSON.parse(JSON.stringify(this.selectedData)))
      this.$emit("saveSelectEmployee",this.selectedData)
    },
    dealData(){
      var allSelectData = objectRepeat(this.selectedData.concat(this.deleteData))
      var dealData =[]
      allSelectData.forEach(item =>{
        this.selectedRowKeys.forEach(key=>{
          if(item.id === key){
            dealData.push(item)
          }
        })
      })
      return dealData
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      console.log(this.selectedData)
      // console.log(this.searchAllData)
      // this.checkAll = includes(this.selectedRowKeys,this.searchAllData)
      // console.log(this.checkAll)
      if (this.selectedData.length > 0) {
        this.selectedData = this.MergeArray(this.selectedData, selectedRows)
      } else {
        this.selectedData = selectedRows
      }
      console.log(this.selectedData)
      //this.saveSelectEmployee(this.selectedData)
    },
     // 去重
    MergeArray (arr1, arr2) {
      var _arr = []
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i])
      }
      for (var x = 0; x < arr2.length; x++) {
        var flag = true
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[x].id === arr1[j].id) {
            flag = false
            break
          }
        }
        if (flag) {
          _arr.push(arr2[x])
        }
      }
       _arr = this.spliceArray(_arr, this.selectedRowKeys)
      return _arr
    },
    // 删除未选择数据
    spliceArray (arr1, arr2) {
      var _arr = []
      for (var x = 0; x < arr1.length; x++) {
        for (var j = 0; j < arr2.length; j++) {
          if (arr1[x].id === arr2[j]) {
            _arr.push(arr1[x])
          }
        }
      }
      return _arr
    },
    //分页操作
    employeeChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getEmployeeList();
    },
    getEmployeeList() {
      this.loading = true;
      var params = {
        page: this.pageNum,
        limit: this.pageSize,
        account: this.account,
        section: this.section,
        shop: this.shop,
        group: this.group,
        sex: this.sex,
        jobCardID: this.jobCardID,
        occupation: this.occupation,
        post: this.post,
        postType: this.postType,
        name: this.name,
      };
      getEmployeeList(params)
        .then((res) => {
          this.list = res.data.employees;
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.formDiv {
  .lable {
    margin-right: 10px;
  }
}

.upload {
  float: right;
}

.recovery {
  height: 100%;
}

.table-content {
  height: calc(100% - 138px);
  overflow: auto;
}

.ant-card-body {
  height: 100%;
}
.select-content {
  text-align:right;
  margin-bottom:20px;
  margin-top:20px;
}
</style>